<template>
  <div class="page-container">
    <!-- 疾病诊断类别 -->
    <div class="diseaseType classifybar">
      <div class="toolbar" style="float:left;padding-top:10px;margin-bottom: 10px;">
        <span class="titleType">疾病诊断类别：</span>
        <el-button
          size="mini"
          type="primary"
          icon="fa fa-plus"
          @click="handleAddOrEdit('', 'add', 'disease')"> 新增</el-button>
        <el-button
          size="mini"
          type="danger"
          icon="el-icon-delete"
          @click="handleDelete('', 'disease')">批量删除</el-button>
      </div>
      <el-table
        ref="diseaseTable"
        :data="tableData"
        style="width: 100%;"
        row-key="id"
        border
        @selection-change="selectionFun"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
          type="selection"
          align="center"
          width="40">
          <!-- <template slot-scope="scope">
            <el-checkbox v-if="scope.row.pid !== '0'" @selection-change="selectionFun"></el-checkbox>
          </template> -->
        </el-table-column>
        <el-table-column
          prop="name"
          label="类别名称"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="sort"
          align="center"
          label="排序">
        </el-table-column>
        <el-table-column
          prop="ops"
          align="left"
          label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.pid === '0'"
              size="mini"
              type="primary"
              icon="fa fa-plus"
              @click="handleAddOrEdit(scope.row, 'add', 'disease')"> 新增</el-button>
            <el-button
              size="mini"
              type="warning"
              icon="fa fa-edit"
              @click="handleAddOrEdit(scope.row, 'update', 'disease')"> 编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(scope.row, 'disease')"> 删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 病例分类 -->
    <div class="infectiousType classifybar">
      <div class="toolbar" style="float:left;padding-top:10px;margin-bottom: 10px;">

        <span class="titleType">病例分类：</span>
        <el-button
          size="mini"
          type="primary"
          icon="fa fa-plus"
          @click="handleAddOrEdit('', 'add', 'infectious')">新增</el-button>
        <el-button
          size="mini"
          type="danger"
          icon="el-icon-delete"
          @click="handleDelete('', 'infectious')">批量删除</el-button>
      </div>
      <el-table
        ref="infectiousTable"
        :data="infectiousData"
        style="width: 100%;"
        row-key="id"
        border
        @selection-change="selectionFun"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
          type="selection"
          align="center"
          width="40">
        </el-table-column>
        <el-table-column
          prop="name"
          label="类别名称"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="description"
          label="描述"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="sort"
          align="center"
          label="排序">
        </el-table-column>
        <el-table-column
          prop="ops"
          align="left"
          label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.pid === '0'"
              size="mini"
              type="primary"
              icon="fa fa-plus"
              @click="handleAddOrEdit(scope.row, 'add', 'infectious')"> 新增</el-button>
            <el-button
              size="mini"
              type="warning"
              icon="fa fa-edit"
              @click="handleAddOrEdit(scope.row, 'update', 'infectious')"> 编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete( scope.row, 'infectious')"> 删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 疾病诊断类型 新增修改对话框 -->
    <disease-dialog ref="diseaseRef" :options="options" @refreshFun="getDiseaseCategory"/>

    <!-- 疾病病例 新增修改对话框 -->
    <infectious-dialog ref="infectiousRef" :options="infectiousOpts" @refreshFun="getInfectiousData"/>
  </div>
</template>

<script>
import { diseaseCategory, deleteDisease, getInfectiousData, deleteInfectious } from '@/api/hospital/index'
import DiseaseDialog from './components/diseaseAddOrUpdate'
import InfectiousDialog from './components/infectiousAddOrUpdate'
export default {
  data () {
    return {
      // 表格数据
      tableData: [],
      dialogVisible: false,
      options: [],
      infectiousData: [],
      infectiousOpts: [],
      // 多选时的数组
      multipleSelection: []
    }
  },
  components: {
    DiseaseDialog,
    InfectiousDialog
  },
  created () {
    // 初始化时获取数据
    this.getDiseaseCategory()
    this.getInfectiousData()
  },
  methods: {
    // 获取疾病诊断类型数据
    getDiseaseCategory () {
      diseaseCategory()
      .then(res => {
        if (res.code === 200) {
          // 列表数据
          this.tableData = res.data
          // 上级ID数据
          this.options = JSON.parse(JSON.stringify(res.data))
          this.options.unshift({id: '0', name: '请选择上级ID'})
        }
      })
    },
    // 获取病例分类数据
    getInfectiousData () {
      getInfectiousData()
      .then(res => {
        if (res.code === 200) {
          this.infectiousData = res.data
          // 上级ID数据
          this.infectiousOpts = JSON.parse(JSON.stringify(res.data))
          this.infectiousOpts.unshift({id: '0', name: '请选择上级ID'})
        }
      })
    },
    selectionFun (val) {
      // 返回的是选中的列的数组集合
      this.multipleSelection = val
    },
    /**
     * 新增或修改
     * row： 行数据
     * type： 新增或修改
     * classify： 类型
     */
    handleAddOrEdit(row, type, classify) {
      // 疾病诊断类别
      if (classify === 'disease') {
        this.$refs.diseaseRef.init(row ? row.id : '', type)
      } else { // 病例分类
        this.$refs.infectiousRef.init(row ? row.id : '', type)
      }
    },
    // 删除 
    handleDelete (row, type) {
      let ids = []
      // 批量删除
      if (!row) {
        if (this.multipleSelection.length === 0) {
          this.$message({
            message: '请选择要删除的数据',
            type: 'warning'
          })
          return
        }else {
          this.multipleSelection.map(item => { ids.push(item.id) })
        }
      } else {
        ids = [row.id]
      }
      this.$confirm('确认删除选择的数据？')
      .then(_ => {
        // 疾病诊断类别
        if (type === 'disease') {
          deleteDisease({ids: ids.join(',')})
          .then(res => {
            if (res.code === 200) this.getDiseaseCategory()
          })
        } else { // 病例分类
          deleteInfectious({ids: ids.join(',')})
          .then(res => {
            if (res.code === 200) this.getInfectiousData()
          })
        }

      })
      .catch(_ => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.classifybar{
  margin-bottom: 10px;
}
.titleType{
  font-weight: bold;
}
</style>
